//引入normalize
@import "normalize.scss";
//引入base
@import "base.scss";
body{
  height: 100%;
  background:url('../images/match/loginbg.png') no-repeat;
  //background:url('../images/match/loginbg.png') no-repeat center / 100% 100%;
   background-size:100%;

  //background-size:(1080/54)*1rem 43.555556rem;
}
.match{
  width: 100%;
  position: relative;
  .big_circle{
    width: (732/54)*1rem;
    height: (732/54)*1rem;
    position: absolute;
    top: (332/54)*1rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: #d7789b;
    border-radius: 50%;
    //border: (16/54)*1rem solid white;
    //border-top-color: #7382dd;
    .small_circle{
      width: (533/54)*1rem;
      height: (533/54)*1rem;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      background-color: #d7789b;
      border-radius: 50%;
      //border: (22/54)*1rem solid white;
    }
    .red{
      width: (533/54)*1rem;
      height: (533/54)*1rem;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: (-533/2/54)*1rem;
      margin-top: (-533/2/54)*1rem;
      border-radius: 50%;
      border: (22/54)*1rem solid white;
      border-bottom-color: #bc2130;
      /*设置旋转原点中心*/
      transform-origin:50% 50%;
      animation:circle 5s linear infinite;
      -webkit-animation:circle 5s linear infinite;
      -moz-animation:circle 5s linear infinite;
      @keyframes circle
      {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

      @-webkit-keyframes circle
      {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
      .ball{
        width: (89/54)*1rem;
        height: (89/54)*1rem;
        position: absolute;
        top: 6.666667rem;
        left: 0rem;
        background-color: #bc2130;
        border-radius: 50%;
      }
      .ball1{
        width: (40/54)*1rem;
        height: (40/54)*1rem;
        position: absolute;
        top: 5.806667rem;
        left: -0.33333rem;
        background-color: #bc2130;
        border-radius: 50%;
      }
    }
    .head{
      width: (171/54)*1rem;
      height: (171/54)*1rem;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      background-color: skyblue;
      border-radius: 50%;
      border: (13/54)*1rem solid white;
    }
  }
  .blue{
    width: (732/54)*1rem;
    height: (732/54)*1rem;
    position: absolute;
    top: (332/54)*1rem;
    left: 50%;
    margin-left: (-732/2/54)*1rem;
    border-radius: 50%;
    border: (16/54)*1rem solid white;
    border-top-color: #7382dd;
    /*设置旋转原点中心*/
    transform-origin:50% 50%;
    animation:circle2 5s linear infinite;
    -webkit-animation:circle2 5s linear infinite;
    -moz-animation:circle2 5s linear infinite;
    @keyframes circle2
    {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(-360deg);
      }
    }

    @-webkit-keyframes circle2
    {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(-360deg);
      }
    }
    .ball{
      width: (89/54)*1rem;
      height: (89/54)*1rem;
      position: absolute;
      top: 0.476667rem;
      left: 1.566667rem;
      background-color: #7382dd;
      border-radius: 50%;
    }
    .ball1{
      width: (40/54)*1rem;
      height: (40/54)*1rem;
      position: absolute;
      top: 2.006667rem;
      left: 0.86667rem;
      background-color: #7382dd;
      border-radius: 50%;
    }
  }
  .name{
    font-size: (46/54)*1rem;
    color: #ffffff;
    position: absolute;
    top: (1174/54)*1rem;
    left: 50%;
    transform: translateX(-50%);
  }
  .level{
    font-size: (35/54)*1rem;
    color: #5affbe;
    position: absolute;
    top: (1287/54)*1rem;
    left: 50%;
    transform: translateX(-50%);
  }
  .gate_money{
    font-size: (35/54)*1rem;
    color: #ffc706;
    position: absolute;
    top: (1339/54)*1rem;
    left: 50%;
    transform: translateX(-50%);
  }


}